<template>
  <div class="content" id="canvasToPic" ref="canvasToPic">
    <div class="top flex-between">
      <div class="main-wrap left">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit">数据存储量</div>
            <el-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
              @click="changeBroken"
              >切换显示</el-button
            >
            <el-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
              @click="getHtml2cancas"
              >导出</el-button
            >
            <!-- <el-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
              @click="daoChu"
              >导出</el-button
            > -->
          </div>
          <div class="right flex-center-column title-con-left-item-right">
            <el-input placeholder="查询几天以内的数据" v-model="input1">
              <el-button
                type="primary"
                size="mini"
                slot="append"
                icon="el-icon-search"
                @click="clickInput1"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div class="chart-con flex-center">
          <!-- <barChartNum v-if="isShow" />
          <barChartSpace v-else /> -->
          <barChartNum
            v-if="isShow"
            :xAxis="barChartNumData.xAxis"
            :value="barChartNumData.value"
            :legend="barChartNumData.legend"
          />
          <barChartSpace
            v-else
            :xAxis="barChartSpaceData.xAxis"
            :value="barChartSpaceData.value"
            :legend="barChartSpaceData.legend"
          />
        </div>
      </div>
      <div class="main-wrap right">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit">数据使用情况</div>
          </div>

          <div class="right flex-center-column">
            <el-select
              v-model="select2"
              placeholder="请选择天数"
              @change="changeSelect2"
            >
              <el-option label="1天" value="1"></el-option>
              <el-option label="3天" value="3"></el-option>
              <el-option label="7天" value="7"></el-option>
            </el-select>
          </div>
        </div>
        <div class="chart-con">
          <messageTableData
            :TableDataMessage="TableDataMessage"
            @message="getMessage"
            :key="datas.day"
          />
        </div>
      </div>
    </div>
    <div class="bottom flex-between">
      <div class="main-wrap left">
        <div class="title-con flex-between" style="margin-top: 16px">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit">数据生产情况</div>
            <el-button
              v-show="!flag"
              type="primary"
              size="mini"
              @click="goBack"
              style="margin-left: 20px"
              >返回</el-button
            >
          </div>
          <div class="right flex-center-column title-con-left-item-right">
            <el-input placeholder="查询几天以内的数据" v-model="input3">
              <el-button
                size="mini"
                slot="append"
                icon="el-icon-search"
                @click="clickInput3"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div class="chart-con flex-center">
          <template v-if="flag">
            <lineChartNum
              :xAxis="lineChartNum.xAxis"
              :value="lineChartNum.value"
              :legend="lineChartNum.legend"
              @details="getDetailsData"
            />
            <!-- <lineChartNum />
            <tableDataQuality /> -->
            <tableDataQuality :qualitys="lineChartNum.qualitys" />
          </template>

          <tableDataDetails
            v-else
            :TableDataDetails="TableDataDetails"
            @current3="setCurrent3"
            :key="datas3.day"
          />
        </div>
      </div>
      <div class="main-wrap right">
        <div class="title-con flex-between">
          <div class="left flex-center">
            <div class="icon"></div>
            <div class="tit">外部系统数据</div>
          </div>
          <div class="flex-start">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="结构化数据" name="Structured"></el-tab-pane>
              <el-tab-pane
                label="非结构化数据"
                name="Unstructured"
              ></el-tab-pane>
            </el-tabs>
          </div>
          <div class="right flex-center-column" style="margin-top: 10px">
            <el-input placeholder="天数" style="width: 120px" v-model="input4">
              <el-button
                size="mini"
                slot="append"
                icon="el-icon-search"
                @click="getDay"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div class="chart-con flex-center">
          <structured
            v-if="isActive"
            :structured="structuredTableDatas"
            @current1="getCurrent2"
            :key="datas4.day"
          />
          <unStructured
            v-else
            :unStructured="unStructuredTableDatas"
            @current2="getCurrent2"
            :key="datas4.day"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import html2canvas from "html2canvas";

import barChartNum from "@/components/dataStatistics/demandFirst/barChartNum.vue";
import barChartSpace from "@/components/dataStatistics/demandFirst/barChartSpace.vue";
import messageTableData from "@/components/dataStatistics/demandSecond/messageTableData.vue";
import lineChartNum from "@/components/dataStatistics/demandThree/lineChartNum.vue";
import tableDataQuality from "@/components/dataStatistics/demandThree/tableDataQuality.vue";

import tableDataDetails from "@/components/dataStatistics/demandThree/tableDataDetails.vue";
import structured from "@/components/dataStatistics/demandFour/structuredTableData.vue";
import unStructured from "@/components/dataStatistics/demandFour/unStructuredtableData.vue";
export default {
  components: {
    barChartNum,
    barChartSpace,
    messageTableData,
    lineChartNum,
    tableDataQuality,
    tableDataDetails,
    structured,
    unStructured,
  },

  data() {
    return {
      // demandFirst（需求一）数据
      input1: "",
      isShow: true,
      datas: {
        day: null,
        pageNum: 1,
      },
      barChartNumData: {
        xAxis: [],
        value: [],
        legend: [],
      },
      barChartSpaceData: {
        xAxis: [],
        value: [],
        legend: [],
      },

      // demandSecond（需求二）数据
      select2: "",
      TableDataMessage: {},

      // demandThree（需求三）数据
      input3: "",
      flag: true,
      choose: null,
      datas3: {
        day: null,
        pageNum: 1,
        layerName: "test",
      },
      lineChartNum: {
        xAxis: [],
        legend: [],
        value: [],
        qualitys: [],
      },
      TableDataDetails: {},
      pieChartColors: [
        "#7846E5",
        "#3A95FF",
        "#516AFE",
        "#FFEA21",
        "#B93DE0",
        "#1AB3FF",
        "#00D97C",
        "#EA518E",
        "#00E3FF",
      ],
      // demandFour（需求四）数据
      activeName: "Structured",
      input4: "",
      isActive: true,
      datas4: {
        day: null,
        pageNum: 1,
      },
      structuredTableDatas: {},
      unStructuredTableDatas: {},
    };
  },

  created() {
    // 数据统计  直角 折线图
    this.handleClick();
    this.getBarChartNumData();
    this.getBarChartSpaceData();
    this.getSelectAllMessage();
    this.getLineChartNum();
    this.getTableDataDetails();
  },

  methods: {
    //截图工具
    getHtml2cancas() {
      var canvasToPic = document.getElementById("canvasToPic");
      html2canvas(canvasToPic, {
        backgroundColor: "black", //设置背景色为透明
      }).then((canvas) => {
        this.url = canvas.toDataURL("image/png");
        // 创建一个a标签
        var link = document.createElement("a");
        //将生成的图片url赋值给a标签的href属性
        link.href = this.url;
        //设置下载的文件名
        link.download = "页面截图";
        // 将a标签插入dom中
        document.body.appendChild(link);
        //模拟点击事件触发下载
        link.click();
        // 完成之后销毁创建的a标签
        document.body.removeChild(link);
      });
    },
    /*****需求一相关方法*******/
    //切换显示
    changeBroken() {
      this.isShow = !this.isShow;
    },
    //查询天数方法
    clickInput1() {
      let day = this.input1 ? this.input1 : null;
      if (this.isShow) {
        this.getBarChartNumData(day);
      } else {
        this.getBarChartSpaceData(day);
      }
      this.input1 = "";
    },
    // 异步获取接口一数据
    async getBarChartNumData(val) {
      let data = await this.$api.selectCount({
        day: val,
      });
      this.barChartNumData.xAxis = data.xaxis;
      this.barChartNumData.legend = data.data.map((item) => {
        return item.laiyuan;
      });
      this.barChartNumData.value = data.data.map((item) => {
        return item.value;
      });
    },

    // 异步获取接口二数据
    async getBarChartSpaceData() {
      let data = await this.$api.selectSpace({
        day: this.input1 ? this.input1 : null,
      });
      this.barChartSpaceData.xAxis = data.xaxis;
      this.barChartSpaceData.legend = data.data.map((item) => {
        return item.laiyuan;
      });
      this.barChartSpaceData.value = data.data.map((item) => {
        return item.value;
      });
    },

    /*****需求二相关方法*******/
    // 切换页码
    getMessage(val) {
      this.datas.pageNum = val;
      this.getSelectAllMessage();
    },
    // 选择天数
    changeSelect2(val) {
      this.datas.day = val;
      this.datas.pageNum = 1;
      this.getSelectAllMessage();
    },
    //需求二异步数据获取
    async getSelectAllMessage() {
      let obj = this.datas;
      let data = await this.$api.selectAllMessage(obj);
      this.TableDataMessage = data;
    },
    /*****需求三相关方法*******/
    //查询天数事件
    clickInput3() {
      this.datas3.pageNum = 1;
      if (this.flag) {
        let day = this.input3 ? this.input3 : null;
        this.getLineChartNum(day);
      } else {
        this.datas3.day = this.input3 ? this.input3 : null;
        this.getTableDataDetails();
      }
      this.input3 = "";
    },
    // //查询页码
    setCurrent3(val) {
      this.datas3.pageNum = val;
      this.getTableDataDetails();
    },
    //切换显示
    goBack() {
      this.flag = true;
      this.init();
    },
    getDetailsData(val) {
      this.flag = false;
      this.init();
      this.datas3.layerName = val;
      this.getTableDataDetails();
    },
    //异步获取接口threeCount数据
    async getLineChartNum(val) {
      // this.init();
      let data = await this.$api.threeCount({ day: val });
      // console.log(data);
      this.lineChartNum.xAxis = data.xAxis;
      // if (data.xAxis.length == 0) {
      //   return (this.lineChartNum = {
      //     xAxis: ["资源", "test", "模型一", "物理模型"],
      //     legend: ["表数量", "字段数量"],
      //     value: [
      //       [0, 0, 0, 0],
      //       [0, 0, 0, 0],
      //     ],
      //     qualitys: [
      //       { quality: "暂无数据", xAxis: "test" },
      //       { quality: "暂无数据", xAxis: "资源" },
      //       { quality: "暂无数据", xAxis: "模型一" },
      //       { quality: "暂无数据", xAxis: "物理模型" },
      //     ],
      //   });
      // }
      this.lineChartNum.qualitys = [];
      for (let i = 0; i < data.xAxis.length; i++) {
        this.lineChartNum.qualitys.push({
          xAxis: data.xAxis[i],
          quality: data.quality[i],
        });
      }
      this.lineChartNum.legend = data.data.map((item) => {
        if (item.type == "table_number") {
          return "表数量";
        } else if (item.type == "resource_number") {
          return "字段数量";
        }
      });
      this.lineChartNum.value = data.data.map((item) => {
        if (item.type == "table_number" || item.type == "resource_number") {
          return item.value;
        }
      });
    },
    //异步获取接口threeSelect详细数据
    async getTableDataDetails() {
      // console.log(this.datas3);
      let data = await this.$api.threeSelect(this.datas3);
      // console.log(data.list);
      // for (let i = 0; i < data.list.length; i++) {
      //   console.log(data.list[i].layerName);
      //   if (data.list[i].layerName == val) {
      //     // console.log(data);
      //   }
      // }
      this.TableDataDetails = data;
    },

    /*****需求四相关方法*******/
    init() {
      this.datas4.day = null;
      this.datas4.pageNum = 1;
      this.datas3.day = null;
      this.datas3.pageNum = 1;
    },
    // 进行数据切换
    handleClick() {
      this.init();
      if (this.activeName == "Structured") {
        this.isActive = true;
        this.getStructured();
      } else {
        this.isActive = false;
        this.getUnStructured();
      }
    },
    // 切换页码
    getCurrent2(val) {
      this.datas4.pageNum = val;

      this.getStructured();

      this.getUnStructured();
    },
    // 查询天数
    getDay() {
      this.datas4.day = this.input4;
      this.datas4.pageNum = 1;
      if (this.activeName == "Structured") {
        this.getStructured();
      } else {
        this.getUnStructured();
      }
      this.input4 = "";
    },
    //异步获取接口一结构化数据
    async getStructured() {
      let obj = this.datas4;
      let data = await this.$api.structured(obj ? obj : null);
      console.log(data, "structured");
      this.structuredTableDatas = data;
    },
    //异步获取接口二非结构化数据
    async getUnStructured() {
      let obj = this.datas4;
      let data = await this.$api.unstructured(obj ? obj : null);
      console.log(data, "unstructured");
      this.unStructuredTableDatas = data;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
// .content {
//   margin: 0 auto;
//   // margin-bottom: 0.2rem;
//   padding: 0px 20px;
//   padding-bottom: 0.05rem;

//   // width: 18.5rem;
//   // height: calc(100% - 0.76rem);
//   overflow: auto;
//   .top {
//     margin-top: 0.1rem;
//     .chart-wrap {
//       width: 100%;
//       height: 4.03rem;
//     }
//   }
//   .main-wrap {
//     border-radius: 20px;
//     position: relative;
//     background: rgba(3, 69, 118, 0.5);
//     &.left {
//       width: 12.67rem;
//       height: 4.8rem;
//     }
//     &.right {
//       width: 5.9rem;
//       height: 4.8rem;
//     }
//   }
//   .chart-con {
//     position: absolute;
//     top: 0.5rem;
//     bottom: 0;
//     left: 0;
//     right: 0;
//   }
//   .btn-con {
//     position: absolute;
//     top: 0.5rem;
//     left: 0;
//     right: 0;
//     z-index: 100;
//     .btn {
//       cursor: pointer;
//       margin: 0 0.06rem;
//       font-size: 0.12rem;
//       font-weight: 400;
//       color: #ffffff;
//       &.active {
//         color: rgba(24, 144, 255, 1);
//         .dot {
//           background: rgba(24, 144, 255, 1);
//         }
//       }
//       .dot {
//         margin-right: 0.1rem;
//         width: 0.08rem;
//         height: 0.08rem;
//         background: #ffffff;
//         border-radius: 50%;
//       }
//     }
//   }
//   .title-con {
//     margin-top: 0.1rem;
//     padding: 0 0.2rem;
//     height: 0.4rem;
//     // color: #ffffff;
//     // overflow: auto;
//     .left {
//       .icon {
//         width: 0.13rem;
//         height: 0.2rem;
//         background-image: url(~@/assets/img/group56@2x.png);
//         background-repeat: no-repeat;
//         background-size: 100% 100%;
//         background-position: center;
//       }
//       .tit {
//         margin-left: 0.1rem;
//         font-size: 0.2rem;
//         font-weight: bold;
//         background-color: transparent;
//         color: #008fff;

//         //截屏时不能使用渐变色字体
//         // background: linear-gradient(0deg, #1890ff 0%, #95ccff 100%);
//         // -webkit-background-clip: text;
//         // -webkit-text-fill-color: transparent;

//         /* margin-left: 0.15rem;
//         width: 1.01rem;
//         height: 0.2rem;
//         background-image: url(~@/assets/images/workload_statistics@2x.png);
//         background-repeat: no-repeat;
//         background-size: 100% 100%;
//         background-position: center;
//         &.tit-pie {
//           width: 0.8rem;
//           height: 0.19rem;
//           background-image: url(~@/assets/images/category_statistics@2x.png);
//         }
//         &.tit-bar {
//           width: 1.01rem;
//           height: 0.2rem;
//           background-image: url(~@/assets/images/workload_statistics@2x.png);
//         } */
//       }
//     }
//     .right {
//       //解决截屏时，输入框内文字偏移的问题
//       ::v-deep .el-input {
//         .el-input__inner {
//           padding-top: 0.1rem;
//           padding-bottom: 0.1rem;
//         }
//       }

//       .time {
//         &time-job {
//           margin-right: 6.4rem;
//         }
//         .tab {
//           border: 0.01rem solid #62656c;
//           // width: 0.44rem;
//           // height: 0.26rem;
//           border-radius: 0.02rem 0rem 0rem 0.02rem;
//           &.active {
//             background: #1890ff;
//           }
//         }
//       }
//       .btn {
//         width: 0.84rem;
//         height: 0.26rem;
//         background: #1890ff;
//         border-radius: 0.05rem;
//       }
//       .icon {
//         margin-right: 0.1rem;
//         width: 0.14rem;
//         height: 0.14rem;
//         background-image: url(~@/assets/img/export@2x.png);
//         background-repeat: no-repeat;
//         background-size: 100% 100%;
//         background-position: center;
//       }
//     }
//   }
//   .bottom {
//     margin-top: 0.2rem;
//     overflow: hidden;
//     height: 4.69rem;
//     .bot-pie-wrap {
//       height: 100%;
//       width: 9.1rem;
//       // background: #2f2f2f;
//       background: rgba(3, 69, 118, 0.5);
//     }
//     .bot {
//       .chart-con {
//         width: 100%;
//         height: 4rem;
//       }
//     }
//   }
// }
// .title-con-other {
//   display: flex;
//   .title-con-left-item,
//   .title-con-right-item {
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//   }
// }
</style>
